<!-- 压差曲线 -->
<template>
  <div class="chart-content">
    <div ref="chartHotRef" class="chart-container" />
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted, nextTick, computed, defineExpose } from "vue";
import { queryPointNumChart } from "@/api/modules/operation";
import * as echarts from "echarts";

defineOptions({
  name: "GAS_CONSUMPTION_SPECIALGAS_ANALYSIS"
});
const props = defineProps({
  chartshotDataList: {
    type: Object,
    default: () => {}
  }
});
const { chartshotDataList } = toRefs(props);
onMounted(() => {});
const chartHotRef = ref(null);
const drawHotChart = () => {
  //处理数据
  const data = [];
  let maxNum = 0;
  let minNum = 0;
  const xData = chartshotDataList.value.map(v => {
    return Object.keys(v)[0];
  });
  const yData = chartshotDataList.value[0][xData[0]].map(v => {
    return v.factorB;
  });
  //处理数据
  chartshotDataList.value.forEach(item => {
    const keyField = Object.keys(item)[0];
    const xDataIndex = xData.findIndex(v => {
      return v === keyField;
    });
    console.log(xDataIndex, "xDataIndex", yData, "yData");
    item[keyField].forEach(v => {
      let arrList = [];
      arrList[0] = xDataIndex;
      const yDataIndex = yData.findIndex(yitem => {
        return yitem === v.factorB;
      });
      arrList[1] = yDataIndex;
      arrList[2] = v.result;
      if (v.result > maxNum) {
        maxNum = v.result;
      }
      if (minNum > v.result) {
        minNum = v.result;
      }
      data.push(arrList);
    });
  });
  let myChart = echarts.init(chartHotRef.value);
  let option = {
    title: {
      text: `Correlation Heatmap Of Water Quality Parameters And Influencing Factors`,
      left: "center",
      top: "10"
    },
    tooltip: {
      show: true,
      position: "top"
    },
    grid: {
      height: "80%",
      top: "10%"
    },
    xAxis: {
      show: true,

      splitArea: {
        show: true
      },
      type: "category",
      data: xData
    },
    yAxis: {
      show: true,
      type: "category",
      data: yData,
      splitArea: {
        show: true
      }
    },

    visualMap: {
      min: minNum,
      max: maxNum,
      calculable: true,
      orient: "vertical",
      top: "center",
      right: "5%"
    },
    series: [
      {
        data: data,
        type: "heatmap",
        label: {
          show: true
        }
      }
    ]
  };
  nextTick(() => {
    myChart.setOption(option);
  });
};
defineExpose({ drawHotChart });
</script>

<style lang="scss" scoped>
.chart-content {
  width: 100%;
  height: 800px;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>
